<template>
	<view class="body" @click="hideState" v-show="initState">
		<!-- 用户头像信息区域 -->
		<view class="headerBox">
			<view style="position: fixed;">
				<return-text text="账号认证" :type="0"></return-text>
			</view>
			<view class="header" :style="{marginTop:headerTop +'px'}">
				<van-image width="260rpx" height="260rpx" fit="cover" round @click.stop="previewAvatar"
					:src="editData.userAvatar ? editData.userAvatar : '/static/images/userHeaderDefault.jpg'"
					use-loading-slot lazy-load></van-image>
			</view>
		</view>
		<!-- 弧状区域占位 -->
		<view class="headerFooter"></view>
		<!-- 内容区域 -->
		<view class="content">
			<!-- 学校 -->
			<view class="contentItem">
				<view class="contentItemLeft">学校</view>
				<view class="contentItemRight">
					<view class="contentItemRightView">
						<text>{{editData.userSchool}}</text>
						<view style="padding:20upx 0upx 20upx 20upx" @click.stop="showSchool">
							<i class="iconfont icon-youjiantou" :style="{color:'#666666',fontWeight:'bold'}"></i>
						</view>
					</view>
				</view>
			</view>
			<!-- 系别 -->
			<view class="contentItem">
				<view class="contentItemLeft">系别</view>
				<view class="contentItemRight">
					<view class="contentItemRightView">
						<text>{{editData.userDepartment}}</text>
						<view style="padding:20upx 0upx 20upx 20upx" @click.stop="showDepartment">
							<i class="iconfont icon-youjiantou" :style="{color:'#666666',fontWeight:'bold'}"></i>
						</view>
					</view>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="contentItem">
				<view class="contentItemLeft">姓名</view>
				<view class="contentItemRight">
					<view class="contentItemRightView">
						<input v-if="state.userNameState" auto-focus="true" maxlength="5" type="text" @click.stop=''
							v-model.trim="editData.userName" class="userNameInput" />
						<view v-else class="contentItemRightView">
							<text>{{editData.userName}}</text>
							<view style="padding:20upx 0upx 20upx 20upx" @click.stop="editUserNameState">
								<i class="iconfont icon-xiugai" :style="{color:'#666666',fontWeight:'bold'}"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 学号 -->
			<view class="contentItem">
				<view class="contentItemLeft">学号</view>
				<view class="contentItemRight">
					<view class="contentItemRightView">
						<input v-if="state.userStunumState" auto-focus="true" maxlength="9" type="text" @click.stop=''
							v-model.trim="editData.userStunum" class="userStunumInput" />
						<view v-else class="contentItemRightView">
							<text>{{editData.userStunum}}</text>
							<view style="padding:20upx 0upx 20upx 20upx" @click.stop="editUserStunumState">
								<i class="iconfont icon-xiugai" :style="{color:'#666666',fontWeight:'bold'}"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 认证 -->
			<view class="approve" @click="approve">认证</view>
		</view>
		<!-- 选择学校 -->
		<van-overlay :show="state.selectSchoolStart">
			<view class="pickerBox">
				<van-picker :columns="schoolList" :default-index="pickerIndex" show-toolbar title="选择学校"
					confirm-button-text="确认" cancel-button-text="取消" @cancel="hideOverlay"
					@confirm="selectSchoolConfirm" />
			</view>
		</van-overlay>
		<!-- 选择系别 -->
		<van-overlay :show="state.selectDepartmentStart">
			<view class="pickerBox">
				<van-picker :columns="departmentList" :default-index="pickerIndex" show-toolbar title="选择学校"
					confirm-button-text="确认" cancel-button-text="取消" @cancel="hideOverlay"
					@confirm="selectDepartmentConfirm" />
			</view>
		</van-overlay>
	</view>
</template>

<script>
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		data() {
			return {
				// 修改的数据
				editData: {
					userAvatar: '',
					// 修改的用户姓名
					userName: '',
					// 修改的用户学号
					userStunum: '',
					// 修改的用户学校,
					userSchool: '',
					// 修改的用户学校系别
					userDepartment: ''
				},
				// 状态
				state: {
					// 用户姓名状态
					userNameState: false,
					// 用户学号状态
					userStunumState: false,
					// 学校选择状态
					selectSchoolStart: false,
					// 系别选择状态
					selectDepartmentStart: false,
				},
				// 选择器下标
				pickerIndex: 0,
				// 学校选择列表
				schoolList: [],
				// 学校获取列表
				schoolObjList: [],
				// 系选择列表
				departmentList: [],
				// 系别获取列表
				departmentObjList: [],
				// 初始状态
				initState: false,
				// 初始数据
				initData: {},
				// 距离
				headerTop: 0
			};
		},
		// 每次显示的时候从本地缓存中获取一下最新用户对象
		created() {
			this.getApprove()
			this.headerTop = this.capsuleTop + this.capsuleHeight
		},
		methods: {
			// 获取学校
			async getSchool() {
				const {
					data: result
				} = await uni.$http.get("/ym_server/user/schoolInfo")
				if (result.code == 200) {
					this.schoolList = result.data.data.map(item => item.title)
					this.schoolObjList = result.data.data
					this.getDepartment()
				}
			},
			// 获取系部
			async getDepartment(search = false) {
				let searchRes = this.schoolObjList.find(item => item.title == this.editData.userSchool)
				const {
					data: result
				} = await uni.$http.get("/ym_server/user/department?classId=" + searchRes.classId)
				if (result.code == 200) {
					this.departmentList = result.data.data.map(item => item.title)
					this.departmentObjList = result.data.data
					if(search){
						this.editData.userDepartment = this.departmentList[0]
					}
					this.pickerIndex = this.departmentList.findIndex(item => item == this.editData.userDepartment)
				}
			},
			// 获取个人资料数据
			async getApprove() {
				const {
					data: result
				} = await uni.$http.get("/ym_server/user/strInfo")
				if (result.code === 200) {
					this.editData = {
						userAvatar: result.data.data.avatar || '',
						userName: result.data.data.str_name || '',
						userSchool: result.data.data.school || "其它",
						userStunum: result.data.data.str_number || '',
						userDepartment: result.data.data.department || "其它",
					}
					this.initData = JSON.parse(JSON.stringify(this.editData))
					this.getSchool()
					setTimeout(() => {
						this.initState = true
					}, 300)
				} else {
					uni.showToast({
						title: "网络异常，稍后重试！",
						icon: "none"
					})
				}
			},
			// 查看头像
			previewAvatar() {
				uni.previewImage({
					current: this.editData.userAvatar, // 当前显示图片的http链接
					urls: [this.editData.userAvatar]
				})
			},
			// 显示选择学校
			showSchool() {
				this.pickerIndex = this.schoolList.findIndex(item => item == this.editData.userSchool)
				this.hideState()
				this.state.selectSchoolStart = true
			},
			// 显示选择系
			showDepartment() {
				this.getDepartment()
				this.hideState()
				this.state.selectDepartmentStart = true
			},
			// 改变修改名称状态
			editUserNameState() {
				this.hideState()
				this.state.userNameState = true
			},
			// 改变修改学号状态
			editUserStunumState() {
				this.hideState()
				this.state.userStunumState = true
			},
			// 隐藏选择器
			hideOverlay() {
				this.hideState()
				this.state.selectSchoolStart = false
				this.state.selectDepartmentStart = false
			},
			// 隐藏状态
			hideState() {
				this.state.userNameState = false
				this.state.userStunumState = false
			},
			// 学校选择确定
			selectSchoolConfirm(event) {
				this.editData.userSchool = event.detail.value
				this.getDepartment(true)
				this.hideOverlay()
			},
			// 系别选择确定
			selectDepartmentConfirm(event) {
				this.editData.userDepartment = event.detail.value
				this.hideOverlay()
			},
			// 认证
			async approve() {
				let initData = Object.values(this.initData)
				let editData = Object.values(this.editData)
				for (let i = 0; i < initData.length; i++) {
					if (initData[i] != editData[i]) {
						let department = this.departmentObjList.find(item => item.title == this.editData
							.userDepartment)
						const requestData = {
							avatar: this.editData.userAvatar,
							classId: department.classId,
							strName: this.editData.userName,
							strNumber: this.editData.userStunum,
						}
						const {
							data: result
						} = await uni.$http.put("/ym_server/user/strInfo", requestData)
						if (result.code == 200) {
							uni.showToast({
								title: "认证成功",
								icon: "none"
							})
						} else {
							uni.showToast({
								title: "认证失败",
								icon: "none"
							})
						}
						break;
					}
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	// 整个大背景，最小高度为整个屏幕
	.body {
		min-height: 100vh;
		width: 100%;
		background: #ffffff;
		overflow: hidden;

		// 用户头像区域
		.headerBox {
			width: 100%;
			background: #3FD3D1;
			overflow: hidden;

			.header {
				width: 260rpx;
				height: 260rpx;
				margin: 0upx auto;
				padding-top: 58upx;
				display: flex;
				justify-content: center;
			}
		}

		// 弧状区域占位
		.headerFooter {
			width: 110%;
			margin-left: -5%;
			height: 86upx;
			background: #3FD3D1;
			border-radius: 0upx 0upx 50% 50%;
		}

		// 内容区域
		.content {
			margin: 96upx 32upx 0upx 32upx;
			padding-bottom: 54upx;

			.contentItem {
				margin: 48upx 0upx;
				display: flex;
				height: 38upx;
				align-items: center;
				font-size: 28upx;

				.contentItemLeft {
					width: 20%;
					color: #333333;
				}

				.contentItemRight {
					width: 80%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 28upx;
						color: #333333;
					}

					.contentItemRightView {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

				.userNameInput,
				.userStunumInput {
					color: #999;
					font-size: 28upx;
					height: 100%;
					width: 100%;
				}

				view {
					display: flex;
				}

				&:last-child {
					color: #EA7B7B;
					margin-bottom: 0upx !important;
				}
			}

			// 认证按钮
			.approve {
				margin: 120upx 0upx 80upx 0upx;
				height: 96upx;
				background: #3FD3D1;
				color: #ffffff;
				font-size: 32upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 选择器盒子
		.pickerBox {
			position: fixed;
			bottom: 0upx;
			width: 100%;
			left: 0upx;
			z-index: 999;
		}
	}
</style>
